<!DOCTYPE html>
<!-- saved from url=(0039)http://web.zhaicool.net/cssreorder.html -->
<html lang="zh-CN"><!--<![endif]--><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width">
<!-- for mobile -->
<title>css属性在线排序_css属性排序工具 | 前端知乎|web前端</title>
<meta name="keywords" content="css属性在线排序,css属性排序工具">
<meta name="description" content="前端知乎网为web前端开发设计人员提供css属性在线排序,css属性排序工具">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://web.zhaicool.net/xmlrpc.php">
<link rel="stylesheet" type="text/css" media="all" href="./CSS property sorting_files/style.css">
<link rel="shortcut icon" href="http://web.zhaicool.net/favicon.ico">
<script src="./CSS property sorting_files/hm.js.下载"></script><script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?d53bca6ce75bf811d6256222f05eb063";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<style>

.reorder {
	width:980px; 
	overflow:hidden; 
	margin:20px auto; 
}

.reorder p{
	margin-bottom:10px; 
	color:#f00; 
}

.reorder textarea {
	width:450px; 
	height:700px; 
}

.reorder #oldcss {
	float:left; 
}

.reorder #newcss {
	float:right; 
}

.reorder div {
	float:left; 
	width:60px; 
	margin-top:200px; 
	margin-left:8px; 
	padding:24px 0; 
	-webkit-border-radius:6px; 
	-ms-border-radius:6px; 
	-moz-border-radius:6px; 
	-o-border-radius:6px; 
	border-radius:6px; 
	box-shadow:none; 
	font-size:22px; 
	text-align:center; 
	color:#fff; 
	background-color:#3f6c18; 
	cursor:pointer; 
}

</style>
</head>
<body>
<div id="header">
  <div class="navi_and_search">
    <div class="navi_and_search_inner">
      <div id="navi">
        <ul class="navi_dt">
          <li><a class="home" href="http://web.zhaicool.net/" rel="home">首页</a></li>
          <li class="menu-item"><a href="http://web.zhaicool.net/category/webqianduan">web前端</a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="http://web.zhaicool.net/category/webqianduan/html5">html5+css3</a></li>
              <li class="menu-item"><a href="http://web.zhaicool.net/category/webqianduan/javascript">JavaScript</a></li>
              <li class="menu-item"><a href="http://web.zhaicool.net/category/webqianduan/jquery">jquery</a></li>
              <li class="menu-item "><a href="http://web.zhaicool.net/category/webqianduan/web">web前端技术</a></li>
            </ul>
          </li>
          <li class="menu-item"><a href="http://web.zhaicool.net/category/php">php</a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="http://web.zhaicool.net/category/php/wordpress">wordpress</a></li>
            </ul>
          </li>
          <li class="menu-item"><a href="http://web.zhaicool.net/category/aspnet">asp.net</a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="http://web.zhaicool.net/category/aspnet/xamarin">xamarin.android</a></li>
              <li class="menu-item"><a href="http://web.zhaicool.net/category/aspnet/xamarin-ios">xamarin.ios</a></li>
            </ul>
          </li>
        </ul>
        <ul class="navi_mobile">
          <li>菜单</li>
        </ul>
      </div>
      <div id="search">
        <form id="searchform" method="get" action="http://web.zhaicool.net/">
          <input type="text" value="搜索..." onfocus="if (this.value == &#39;搜索...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;搜索...&#39;;}" size="35" maxlength="50" name="s" id="s">
          <input type="submit" id="searchsubmit" value="搜索...">
        </form>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <div class="title_and_rss">
    <div class="title_and_rss_inner">
      <h1 class="site_title"> <a href="http://web.zhaicool.net/" rel="home">css属性在线排序</a> </h1>
      <h2 class="site_desc">前端知乎，不知往死里乎，乎死即拉倒也</h2>
      <div class="clear"></div>
    </div>
  </div>
</div>
<div id="wrapper">
  <div class="reorder">
  <p><b>注意：</b>输入样式的时候要么做好大括号的匹配，要么不要输入大括号！如：.class{z-index: 1;bottom: 4%;} 或者直接输入：z-index: 1;bottom: 4%;
</p>
    <textarea id="oldcss"></textarea>
    <div onclick="cssReorder.reordermain();">转<br>
    换</div>
    <textarea id="newcss" readonly=""> </textarea>
  </div>
</div>
<div id="footer">
  <div class="footer_inner">
    <div class="footer_content"> 版权所有 © 2015 <a href="http://web.zhaicool.net/" title="前端知乎">前端知乎</a> </div>
  </div>
</div>
<script>
var cssReorder = (function(){	
	var reordermain=function () {
	    var cssOrder = new Array("display", "visibility", "float", "clear", "position", "top", "right", "bottom", "left", "z-index", "width", "min-width", "max-width", "height", "min-height", "max-height", "overflow", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "border-width", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-style", "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", "border-color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-radius", "box-shadow", "outline", "list-style", "table-layout", "caption-side", "border-collapse", "border-spacing", "empty-cells", "font", "font-family", "font-size", "line-height", "font-weight", "text-align", "text-indent", "text-transform", "text-decoration", "letter-spacing", "word-spacing", "white-space", "vertical-align", "color", "background", "background-color", "background-image", "background-repeat", "background-position", "opacity", "cursor", "content", "quotes");
	    var oldCss = document.getElementById("oldcss").value;
	    oldCss = oldCss.replace(/(\n)+|(\r\n)+/g, "");
		var newcssstr="";
		var houzhui="";
		if( oldCss.indexOf("}")>-1&&oldCss.indexOf("{")>-1){
	    var judgeCss = new JudgeCss(oldCss);
	    newcssstr = getNewStyle(judgeCss.changdu, judgeCss.allyangshiarr, cssOrder);
		houzhui=judgeCss.houzhui;
		}else{
			newcssstr =getNewStyles(oldCss,cssOrder);
			newcssstr=newcssstr.replace(/\t/g,"");
			}
	    document.getElementById("newcss").value = newcssstr + houzhui;
	};
	var JudgeCss=function (oldCss) {
	    var allyangshiarr = oldCss.split("}");
	    var changdu = allyangshiarr.length;
	    var houzhui = "";
	    if (trimStr(allyangshiarr[changdu - 1]).length < 1) {
	        changdu = changdu - 1;
	    } else {
	        houzhui = trimStr(allyangshiarr[changdu - 1]);
	    }
	    return {
	        allyangshiarr: allyangshiarr,
	        changdu: changdu,
	        houzhui: houzhui
	    };

	};
	var getNewStyle=function (changdu, allyangshiarr, cssOrder) {
	    var eachnewcss = "";
	    var newcssstr = "";
	    for (var i = 0; i < changdu; i++) {
	        if (allyangshiarr[i].indexOf("{") > -1) {
	            var yangshiarr = allyangshiarr[i].split("{");
	            var yangshiname = yangshiarr[0];
	            var yangshicontent = yangshiarr[1];
	            var oldshuxingarr = matchOldCss(yangshicontent);
	            var newshuxing = getNewCss(oldshuxingarr, cssOrder);
	            var xuhaoarr = getNewCssArr(newshuxing, "[end]", "==>");
	            xuhaoarr = getMin_MaxArr(xuhaoarr, "==>");
	            var newcssyangshi = getNewyangshi(xuhaoarr);
	            eachnewcss = "\n" + yangshiname + "{\n" + newcssyangshi + "}";
	        } else {
	            var daichuliyangshi = trimStr(yangshi[i]);
	            if (daichuliyangshi.length > 0) {
	                eachnewcss = "以下代码输入的时候格式不对，如大括号没有成对出现等，请检查：" + daichuliyangshi;
	            }
	        }
	        newcssstr = newcssstr + eachnewcss + "\n";
	    }
		 return newcssstr;

	};
	
	var getNewStyles=function (oldCss, cssOrder) {
	    var eachnewcss = "";
	    var newcssstr = "";	  
	           
	            var oldshuxingarr = matchOldCss(oldCss);
	            var newshuxing = getNewCss(oldshuxingarr, cssOrder);
	            var xuhaoarr = getNewCssArr(newshuxing, "[end]", "==>");
	            xuhaoarr = getMin_MaxArr(xuhaoarr, "==>");
	            var newcssyangshi = getNewyangshi(xuhaoarr);
	            eachnewcss = "\n" + newcssyangshi;
	       
	        newcssstr = newcssstr + eachnewcss + "\n";
		 return newcssstr;

	};
	
	var getMin_MaxArr=function (arr, splittype) {

	    arr.sort(function(a, b) {
	        var keya = a.split(splittype);
	        keya = keya[0];
	        var keyb = b.split(splittype);
	        keyb = keyb[0];
	        return keya - keyb;

	    });

	    return arr;
	};
	
	var matchOldCss=function (yangshicontent) {
	    var oldshuxingarr = [];
	    if (yangshicontent.indexOf(";") > -1) {
	        oldshuxingarr = yangshicontent.split(";");
	    } else {
	        oldshuxingarr.push(yangshicontent);
	    }
	    return oldshuxingarr;
	};

	var matchOrder= function (cssOrder, name, content) {
	    var str = "";
		var webkitflag=0;
		var msflag=0;
		var mozflag=0;
		var oflag=0;
	    for (var l in cssOrder) {
	        if (name.indexOf("-webkit-") > -1) {
				
	            if (name.indexOf(cssOrder[l]) > -1) {
	                str += (l - 0.4) + "==>" + name + ":" + content + "[end]";	
					webkitflag=1;
	            }else {				
	                if (l == cssOrder.length-1&&webkitflag==0) {						
	                    str += 496 + "==>" + name + ":" + content + "[end]";						
	                }
	            }
				
	        } else if (name.indexOf("-ms-") > -1) {
	            if (name.indexOf(cssOrder[l]) > -1) {
	                str += (l - 0.3) + "==>" + name + ":" + content + "[end]";
					msflag=1;

	            }else {					
	                if (l == cssOrder.length-1&&msflag==0) {
	                    str += 497 + "==>" + name + ":" + content + "[end]";
	                }

	            }
	        } else if (name.indexOf("-moz-") > -1) {
	            if (name.indexOf(cssOrder[l]) > -1) {
	                str += (l - 0.2) + "==>" + name + ":" + content + "[end]";
					mozflag=1;

	            }else {					
	                if (l == cssOrder.length-1&&mozflag==0) {
	                    str += 498 + "==>" + name + ":" + content + "[end]";
	                }

	            }
	        } else if (name.indexOf("-o-") > -1) {
	            if (name.indexOf(cssOrder[l]) > -1) {
	                str += (l - 0.1) + "==>" + name + ":" + content + "[end]";
					oflag=1;
	            }else {					
	                if (l == cssOrder.length-1&&oflag==0) {
	                    str += 499 + "==>" + name + ":" + content + "[end]";
	                }

	            }
	        } else {
				
	            if (name == cssOrder[l]) {
	                str += l + "==>" + name + ":" + content + "[end]";
	                break;
	            } else {					
	                if (l == cssOrder.length-1) {
	                    str += 500 + "==>" + name + ":" + content + "[end]";
	                }

	            }
	        }
	    }
		
	    return str;

	};

	var getNewCss=function (arr, cssOrder) {
	    var str = "";
	    for (var k in arr) {			
	        if (arr[k].indexOf(":") > -1) {
	            var eacharr = arr[k].split(":");
	            var eachname = trimStr(eacharr[0]);
	            var eachontent = trimStr(eacharr[1]);
	            str += matchOrder(cssOrder, eachname, eachontent);				
	        } else {
	            var pendingstr = arr[k];
	            str += 1000 + "==>" + pendingstr + "[end]";

	        }

	    }
		
	    return str;

	};
	var getNewCssArr=function (str, splittype1, splittype2) {
	    var strarr = str.split(splittype1);
	    var arr = [];
	    for (var m in strarr) {
	        if (m < (strarr.length - 1)) {
	            var newshuzu = strarr[m];
	            arr.push(newshuzu);
	        }
	    }
	    return (arr);

	};



	var getNewyangshi=function (xuhaoarr) {
	    var newcssyangshi = "";
	    for (var n in xuhaoarr) {
	        var value = xuhaoarr[n].split("==>");
	        value = trimStr(value[1]);
	        if (value.length > 0) {
	            newcssyangshi += '\t' + value + "; \n";
	        }
	    }
	    return newcssyangshi;
	};

	var trimStr=function (str) {
	    return str.replace(/(^\s*)|(\s*$)/g, "");
	};
	
	return{
		reordermain:reordermain		
	};

	
	

})();

</script>

</body></html>